<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background: skyblue;
        }
        .box a{
            text-decoration: none;
            color: #000;
        }
    </style>
    <script src="js/js.cookie.js"></script>
</head>
<body>
    <div class="box">
        <h1>注册</h1>
        <p>用户名:<input type="text" placeholder="请输入用户名" id="uname"><span></span></p>
        <p>密&nbsp&nbsp&nbsp码:<input type="password" placeholder="请输入密码" id="upwd"><span></span></p>
        <p>手机号:<input type="text" placeholder="请输入手机号" id="utel"><span></span></p>
        <button>注册</button>
        <button><a href="login.html">返回登录</a></button>
    </div>
    <script>
        function fn(reg,oInput,msg){
            var status=reg.test(oInput.value);
            oInput.nextElementSibling.innerHTML=status?"":msg.fontcolor("red");
            return status;
        }

        // 判断输入的内容是否合法
        var uname=document.querySelector("#uname");
        var upwd=document.querySelector("#upwd");
        var utel=document.querySelector("#utel");
        var oBtns=document.querySelectorAll("button");
        var nameFlag=false;pwdFlag=false;telFlag=false;
        uname.oninput=function(){
            nameFlag=fn(/^\w{6,}$/,this,"用户名长度需要6位以上");
        }
        upwd.oninput=function(){
            pwdFlag=fn(/^\w{6,16}$/,this,"密码长度位6-16位");
        }
        utel.oninput=function(){
            telFlag=fn(/^1[3-9]\d{9}$/,this,"手机号码不合法");
        }
        oBtns[0].onclick=function(){
            if(nameFlag&&pwdFlag&&telFlag){
                // 获取本地数据
                var oUserList=JSON.parse(localStorage.getItem("users")||'[]');
                // 获取输入数据
                var oUser={
                    name:uname.value,
                    pwd:upwd.value,
                    tel:utel.value
                }
                // 进行比较
                var isFlag=false;
                for(var i=0;i<oUserList.length;i++){
                    if(oUserList[i].name===oUser.name){
                        isFlag=true;
                        break;
                    }
                }
                if(!isFlag){
                    oUserList.push(oUser);
                    localStorage.setItem("users",JSON.stringify(oUserList));
                    alert("注册成功!");
                    // location.href="login.html";
                }else{
                    alert("注册失败!");
                }
            }else{
                alert("信息有错误!");
            }
            return false;//阻止默认行为
        }
    </script>
</body>
</html>